<template>
  <div>
    <van-row>
        <van-col offset="6" span="12" class="m_3">
          <img class="logo" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542602515319&di=ce5ab6764322f6cfb7d3bae071c2f049&imgtype=0&src=http%3A%2F%2Fwww.cncbsb.com%2Fup%2F2018-1%2F2018130153957.png">
        </van-col>
        <van-col offset="8" span="8" class="t_c">
          以太坊游戏
        </van-col>
    </van-row>

    <h2 class="title">请登录</h2>
    <van-row>
        <van-cell-group>
          <van-field
            v-model="phone"
            type="number"
            left-icon="contact"
            label="手机号"
            placeholder="请输入手机号码"
          />
          <van-field
            v-model="password"
            left-icon="password-not-view"
            type="password"
            label="密码"
            placeholder="请输入登录密码"
          />
          <van-field
            v-model="img_code"
            left-icon="photo"
            label="验证码"
            placeholder="请输入验证码"
            >
          </van-field>
          <img style="width:80px;height:30px;position:absolute;right:6px;bottom:7px;z-index:999;" v-on:click="getCodeimg" :src="img_url" />
        </van-cell-group>

        <div class="p_3">
            <van-button @click="submit" type="primary" size="normal" class="w_100">登录</van-button>
        </div>
    </van-row>

    <van-row class="footer" type="flex" justify="space-between">
      <van-col span="12" class="t_c">
        <router-link to='/reg'>没有账号?去注册</router-link>
      </van-col>
      <van-col span="12" class="t_c">
        <router-link to='/kefu'>忘记密码?</router-link>
      </van-col>
    </van-row>

  </div>
</template>

<script>
export default {
  data () {
      return {
          phone:'',
          password:'',
          img_url: require("./../../../static/image/code.png"), //图形验证码
          img_code:'',  //图形验证码值
      }
  },
  // 组件加载完毕
  mounted() {
     this.getCodeimg();
  },
  methods:{
    //获取图形验证码
    async getCodeimg() {
      let res = await this.request("post", {
        url: "/com/comcodeimg/getcode"
      });
      this.img_url = res.data.url;
      this.img_token = res.data.img_token;
    },
    //登录
    async submit() {
      var that = this;
      if(!this.phone) return this.my.toast('请输入手机号');
      let reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if(!reg.test(this.phone)) return this.my.toast('手机格式不正确');

      if(!this.password) return this.my.toast('请输入登录密码');
      if (!this.img_code) return this.my.toast('请输入图形验证码');
      var that = this;
      let data = {
        url: "/user/publics/login",
        phone: this.phone,
        password: this.password,
        img_token: this.img_token,
        img_code: this.img_code,
        is_loading: true
      };
      let res = await this.request("post", data);
      this.getCodeimg();
      if (res.code != 0) return this.my.toast(res.msg);
      this.my.toast({message:'登录成功',type:'success'},1,function(){
        that.my.setLocal("userinfo", res.data.userinfo);
        that.$router.push("/home");
      });
    }
  }
};
</script>
<style scoped>
.logo{
    width: 100%;
}
.footer{
  margin-top:3rem;
}
.footer a{color:#999;}
.codeimg{
  width:40px;
  height:40px;
}
</style>
